<template>
	<uni-popup ref="upWorderPopup" height="200px" type="center" :animation="false">
		<view class="mypopup">
			<view class="mypopup__head">
				<image src="../../static/img/icon-clock.png"></image>
				<text>更新工单弹窗</text>
			</view>
			<view class="mypopup__body">
				<!-- <AGInput placeholder="客户电话" :value="AccountName" @change="ChangeAccountName" />
				<AGInput placeholder="备选移动电话" :value="ContactPhone" @change="ChangeContactPhone"  />
				<AGInput placeholder="街道" :value="Address" @change="ChangeAddress"/>
				<picker mode="selector" :range="upWorderReason" :value="reasonIndex" range-key="Name" @change="ChangeReason">
					<AGInput customStyle="margin-top:0px;" readonly dropdown placeholder="原因代码" :value="upWorderReason[reasonIndex].Name" />
				</picker> -->
				<view class="inputrow">
					<view class="inputrow__label">客户电话:</view>
					<input placeholder="客户电话" :value="AccountName" @input="ChangeAccountName" />
				</view>
				<view class="inputrow">
					<view class="inputrow__label">备选移动电话:</view>
					<input placeholder="备选移动电话" :value="ContactPhone" @input="ChangeContactPhone" />
				</view>
				<view class="inputrow">
					<view class="inputrow__label">街道:</view>
					<input placeholder="街道" :value="Address" @input="ChangeAddress" />
				</view>
				<view class="inputrow">
					<view class="inputrow__label">原因代码:</view>
					<view class="inputrow__view">
						<picker mode="selector" :range="upWorderReason" :value="reasonIndex" range-key="Name" @change="ChangeReason">
							<AGInput customStyle="margin-top:0px;" readonly dropdown placeholder="原因代码" :value="upWorderReason[reasonIndex].Name" />
						</picker>
					</view>
				</view>
				<view class="ag-divider"></view>
				<AGInput textarea placeholder="工单备注" @change="ChangeUpWorderRemark" />
				<view class="mypopup__footer">
					<button class="cu-btn lg primary" @click="Submit">确定</button>
					<button class="cu-btn lg primary plain" @click="Cancel">取消</button>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup';
	import AGInput from '../AGInput/index'
	import constant from '@/common/constant'
	export default {
		props: {
			AccountName: {
				type: String,
				default () {
					return ""
				}
			},
			//备选移动电话
			ContactPhone: {
				type: String,
				default () {
					return ""
				}
			},
			//街道
			Address: {
				type: String,
				default () {
					return ""
				}
			}
		},
		components: {
			AGInput,
			uniPopup
		},
		data() {
			return {
				upWorderReason: [],
				reasonIndex: 0,
				upWorderRemark: ""
			}
		},
		mounted() {
			console.log(constant.WORDER_UPDATE_CODE);
			this.ReasonCodeListAsync(constant.WORDER_UPDATE_CODE)
		},
		methods: {
			Submit(e) {
				let parm = {
					Remark: this.upWorderRemark,
					ReasonId: this.upWorderReason[this.reasonIndex].ReasonCodeId
				}
				this.$emit("UpWorderSubmit", parm)
			},
			Cancel(e) {
				this.closePoPup();
			},
			ChangeUpWorderRemark(e) {
				this.upWorderRemark = e;
			},
			ChangeReason(e) {
				this.reasonIndex = e.detail.value;
			},
			openPoPup() {
				this.$refs.upWorderPopup.open();
			},
			closePoPup() {
				this.$refs.upWorderPopup.close();
			},

			ChangeAccountName(e) {
				this.$emit("ChangeUpWOAccountName", e.detail.value)
			},
			ChangeAddress(e) {
				this.$emit("ChangeUpWOAddress", e.detail.value)
			},
			ChangeContactPhone(e) {
				this.$emit("ChangeUpWOContactPhone", e.detail.value)
			},


			ReasonCodeListAsync(ReasonCodeType) {
				let UserPhone = this.UserInfo.mobile;
				let token = this.UserInfo.RetId
				this.workorderdetailservice.ReasonCodeListAsync(UserPhone, ReasonCodeType, token)
					.then(result => {
						console.log(result);
						if (result.RetBool == true) {
							let data = JSON.parse(result.RetObject);
							this.upWorderReason = data;
						} else {
							uni.showToast({
								title: result.RetMsg,
								icon: "none"
							});
						}
					});
			},
		}
	}
</script>

<style lang="scss">
.inputrow {
		display: flex;
		flex-direction: row;

		&__label {
			width: 150rpx;
			font-size: 24rpx;
			color: #808080;
			margin-top: 20rpx;
		}
		&__view{
			font-size: 20rpx;
			height: 50rpx;
			min-height: 50rpx;
			margin-top: 10rpx;
			width: 450rpx;
		}
		input {
			background-color: #eeeeee;
			font-size: 20rpx;
			padding: 0 20rpx;
			height: 58rpx;
			min-height: 58rpx;
			margin-top: 10rpx;
			width: 450rpx;

			&::placeholder {
				color: #808080;
				font-size: 20rpx;
			}
		}


	}
</style>
